// 政策库 - 详情
import React from 'react';
import { observer, useLocalStore } from 'mobx-react-lite';
import { useLocation } from 'react-router';
import { parse } from 'qs';
import moment from 'moment';
import * as addApi from '~/apis/policy/addApi';
import './index.local.sass';


const PolicyDetail = observer(() => {
  const location = useLocation();
  const querryParams = parse(location.search, { ignoreQueryPrefix: true });

  const state = useLocalStore(() => ({
    id: querryParams.id || '',
    policyInfo: {} as any,
  }));

  // initPage
  const initPage = (id: string) => {
    addApi.getPolicy(id).then((res) => {
      state.policyInfo = res.data ? res.data : null;
    });
  };

  React.useEffect(() => {
    if (state.id) {
      initPage(state.id);
    }
  }, []);

  const policyInfo: any = state.policyInfo;
  return (
    <div>
      <div className='detail-container'>
        <h2>{policyInfo.name ? policyInfo.name : ''}</h2>
        <div className='detail-tag'>
          <span><em>Authors: </em> {policyInfo.author ? policyInfo.author : ''}</span>
          <span><em>Country/Region: </em> {policyInfo.countryName ? policyInfo.countryName : ''}</span>
          <span><em>Date: </em> {policyInfo.createTime ? moment(policyInfo.createTime).format('YYYY/MM/DD') : ''}</span>
        </div>
        <div className='detail-content'>
          <div dangerouslySetInnerHTML={{ __html: policyInfo.allContent }} />
        </div>
      </div>
    </div>
  );
});

export default PolicyDetail;
